<template>
	<div :id="localUUID" class="c-chartpie"></div>
</template>

<script>
import moment from "moment";
import { Chart } from "@antv/g2";
import { createUUID } from "@/common/js/mUtils";
import componentRefresh from "@/mixins/componentRefresh";
import { cloneDeep } from "lodash";
import * as echarts from "echarts";
import "echarts-wordcloud";
//准备数据

export default {
	name: "CWordcloud",
	data() {
		return {
			localUUID: createUUID(),
			chartInstance: null,
			mappings: [],
		};
	},
	// mixins: [componentRefresh],
	props: {
		props: {
			type: Array,
			default: function() {
				return [
					{
						fields: [],
					},
				];
			},
		},
		width: {
			type: Number,
			default: 300,
		},
		height: {
			type: Number,
			default: 300,
		},
		uuid: String,
	},
	computed: {
		dataTrigger() {
			if (this.props[1].fields[0].value.dataJson.json) {
				let result = this.props[1].fields[0].value.dataJson.json;
				let dataobj = "{}";
				try {
					dataobj = JSON.parse(result);
				} catch (e) {
					console.warn(e);
					this.$message.error("JSON格式有误请重试");
					dataobj = {};
				}
				return dataobj;
			} else {
				return "";
			}
		},
		modelTrigger() {
			return this.props[1].fields[0].value.dataJson.model;
		},
	},
	watch: {
		dataTrigger(val) {
			if (val && this.chartInstance) {
				this.chartInstance.clear();
				this.initData();
			}
		},
		modelTrigger() {
			if (this.chartInstance) {
				this.chartInstance.clear();
				this.initData();
			}
		},
		width() {
			this.resizeChart();
		},
		height() {
			this.resizeChart();
		},
	},
	mounted() {
		this.initData();
	},
	methods: {
		initData() {
			this.initMapping();
			let mData = this.dataTrigger;
			const option = {
				series: [
					{
						type: "wordCloud",

						// The shape of the "cloud" to draw. Can be any polar equation represented as a
						// callback function, or a keyword present. Available presents are circle (default),
						// cardioid (apple or heart shape curve, the most known polar equation), diamond (
						// alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.
						shape: "circle",
						// A silhouette image which the white area will be excluded from drawing texts.
						// The shape option will continue to apply as the shape of the cloud to grow.

						// Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
						// Default to be put in the center and has 75% x 80% size.
						left: "center",
						top: "center",
						width: "100%",
						height: "100%",
						right: null,
						bottom: null,
						// Text size range which the value in data will be mapped to.
						// Default to have minimum 12px and maximum 60px size.
						sizeRange: [12, 55],
						// Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45
						rotationRange: [-45, 0, 45, 90],
						rotationStep: 45,
						// size of the grid in pixels for marking the availability of the canvas
						// the larger the grid size, the bigger the gap between words.
						gridSize: 1,

						// set to true to allow word being draw partly outside of the canvas.
						// Allow word bigger than the size of the canvas to be drawn
						drawOutOfBound: false,
						// If perform layout animation.
						// NOTE disable it will lead to UI blocking when there is lots of words.
						layoutAnimation: true,
						//随机生成字体颜色
						// maskImage: maskImage, //字体以图片形状分布，支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
						textStyle: {
							fontFamily: "sans-serif",
							fontWeight: "bold",
							// Color can be a callback function or a color string
							color: function() {
								// Random color
								return (
									"rgb(" +
									[
										Math.round(Math.random() * 255),
										Math.round(Math.random() * 255),
										Math.round(Math.random() * 255),
									].join(",") +
									")"
								);
							},
						},
						//数据
						data: mData,
					},
				],
			};
			//初始化echarts实例
			this.chartInstance = echarts.init(
				document.getElementById(this.localUUID)
			);
			//使用制定的配置项和数据显示图表
			this.chartInstance.setOption(option);
		},
		resizeChart() {
			let width = parseInt(this.width);
			let height = parseInt(this.height);
			this.chartInstance.resize(width, height);
		},
		initMapping() {
			//读取自定义数据
			let model = this.props[1].fields[0].value.dataJson.model;
			this.mappings = model.map((m) => {
				let field = m.field;
				let mapping = m.mapping;
				let key = mapping || field;
				return { field: key };
			});

			if (!this.props[1].fields[0].value.dataJson.json) {
				this.mappings = [
					{
						field: "name",
					},
					{
						field: "value",
					},
				];
			}
		},
	},
};
</script>

<style scoped>
.c-chartpie {
	width: 100%;
	height: 100%;
}
</style>
